<template>
  <div  :class="[item.type === id ? 'cardWrapClick' : '', 'cardWrap']" @click="handleChange(item.type)">
    <div class="pic g-flex-c">
      <img v-if="item.type === 1" src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/vipPool/people-icon.png" alt="">
      <img v-if="item.type === 2" src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/vipPool/icon-vipOrder.png" alt="">
      <img v-if="item.type === 3" src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/vipPool/icon-vipPay.png" alt="">
      <img v-if="item.type === 4" src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/vipPool/icon-vipOil.png" alt="">
      <img v-if="item.type === 5" src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/vipPool/icon-oilCus.png" alt="">
    </div>
    <div class="word">
      <p>{{item.title}}</p>
      <el-tooltip class="item" effect="dark"  placement="top-start">
        <div slot="content">{{item.value}}</div>
        <p>{{item.value}}</p>
      </el-tooltip>
      <p>
        <span>{{item.timeType}}</span>
        <el-tooltip class="item" effect="dark"  placement="top-start">
          <div slot="content">{{item.valueAdd}}</div>
          <span v-if="item.valueAdd > 0">+{{item.valueAdd}}</span>
          <span v-else>{{item.valueAdd}}</span>
        </el-tooltip>
        <img v-if="item.valueAdd < 0" src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/vipPool/icon-down.png" alt="">
        <img v-else src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/vipPool/icon-up.png" alt="">
      </p>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props:{
    item:{
      type: Object,
      default: () => ({})
    },
  },
  computed: {
    ...mapGetters(['id'])
  },
  methods: {
    handleChange (type) {
      this.$emit('handleChangeCard', type)
    }
  }
}
</script>

<style scoped lang="less">
.cardWrap {
  width: 19%;
  min-width: 190px;
  height:120px;
  margin-top: 10px;
  background: #FFFFFF;
  box-shadow: 0px 5px 4px 0px #F3F5FC;
  border-radius: 10px;
  border: 1px solid #F3F5FC;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .pic {
    width:40%;
    height: 100%;
    >img{
      display: inline-block;
      width: 60px;
      height: 60px;
    }
  }
  .word{
    flex:1;
    height: 100%;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    >p{
      margin: 0;
      padding: 0;
    }
    >p:nth-child(1) {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #808080;
    }
    >p:nth-child(2) {
      width: 130px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-size: 26px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
    }
    >p:nth-child(3) {
      display: flex;
      align-items: center;
      >span:nth-child(1){
        display: inline-block;
        max-width: 70px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
      }
        >span:nth-child(2){  
        font-size: 14px;
        width: 50px;
        max-width: 50px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #710000;
      }
        >img{
        display: inline-block;
        width: 14px;
        height: 14px;
      }
    }
  }
}
.cardWrapClick{
  border: 1px solid #ccc;
}
</style>